<template>
 <div center style="margin-left: 300px; margin-top: 100px; ">
   <el-card style="width: 400px; float: left; margin-right: 15px;height: 400px;" shadow="hover" >
<el-form-item label="请选择角色" >
 <el-tree
    style="max-width: 600px"
    :data="datas"
    :props="Props"
    @node-click="handleNodeClick"
    node-key="id"
  />
             </el-form-item>
  </el-card>
             
            
    <el-card style="width: 400px;float: left;height: 400px;max-height: 1000px; " shadow="hover">
   <el-form-item label="权限菜单" >
 <el-tree
 default-expand-all
    style="max-width: 600px"
    :data="data"
    show-checkbox
    node-key="id"
    ref="treeRef"
    :props="defaultProps"
    
  />
          </el-form-item>
         
    </el-card>  
    <br/>
   
 </div>
     <el-button style="margin-top: 410px; margin-right: 200px;" size="large" color="#626aef" @click="AddRoleMenu"  >保存</el-button>
       
             
       
</template>
<script lang="ts"setup>
import axios from 'axios'
import {ref,reactive,onMounted} from 'vue'
import { ElMessage, type TreeInstance } from 'element-plus'
import Read from  '@/http/Readhttp'
import Write from '@/http/Writehttp'
const handleNodeClick = (x: any) => {
 
  ruleform.rid=x.id
   console.log(ruleform.rid)
   GetRoleMenu(x.id)
  
}
onMounted(()=>{
    getrole();
    getmenu();
   
})
const datas=ref([])
const getrole=()=>{
    Read.get("/api/Roles/GetRoleSelect").then(res=>{
        datas.value=res.data.datas
    })
}
const Props = {
  children: 'children',
  label: 'roleName',
  id:'id'
}
const defaultProps = {
  children: 'children',
  label: 'menuName',
  id:'id'
}
const data = ref([])
const getmenu=()=>{
  Read.get("/api/Menus/GetTreeMenu").then(res=>{
    data.value=res.data.datas
  })
}
const treeRef = ref<TreeInstance>()
const ruleform=reactive({
  "rid": 0,
  "mid":''
})
const AddRoleMenu=()=>{
  var s=treeRef.value?.getCheckedKeys(false);
  ruleform.mid=s?.toString() ?? ''
  Write.post("/api/Menus/AddRoleMenu",ruleform).then(res=>{
    if(res.data.code==200)
  {
    ElMessage.success(res.data.msg);
    
  }
  else{
    ElMessage.error(res.data.msg);
  }
  })
}
const RoleMenu=ref([])


const GetRoleMenu=(id:any)=>{
  RoleMenu.value=[]
  Read.get("/api/Menus/GetRoleMenu",{params:{rid:id}}).then(res=>{
  res.data.datas.forEach((menu:any)=>{
    (RoleMenu.value as any).push(menu.mid)
  })
   treeRef.value?.setCheckedKeys(RoleMenu.value,true);
  })
 
}


</script>
<style scoped>
.demo-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
